<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递查询系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .search-section {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 30px;
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        label {
            font-weight: bold;
            color: #333;
        }
        input, select {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        button {
            padding: 12px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            flex: 1;
        }
        button:hover {
            background-color: #0056b3;
        }
        .warning {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
            color: #856404;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .error {
            color: #dc3545;
            text-align: center;
            padding: 20px;
        }
        .express-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .info-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border-left: 4px solid #007bff;
        }
        .info-card h3 {
            margin-top: 0;
            color: #333;
        }
        .info-item {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }
        .info-label {
            font-weight: bold;
            color: #555;
        }
        .info-value {
            color: #007bff;
        }
        .track-list {
            margin-top: 20px;
        }
        .track-item {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .track-time {
            font-weight: bold;
            color: #333;
        }
        .track-status {
            margin-top: 5px;
            color: #666;
        }
        #expressResult {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>📦 快递查询系统</h1>
    </div>

    <div class="search-section">
        <div class="input-group">
            <label for="orderNo">快递单号：</label>
            <input type="text" id="orderNo" placeholder="请输入快递单号">
        </div>

        <div class="input-group">
            <label for="expressType">快递公司（可选）：</label>
            <select id="expressType">
                <option value="">自动识别</option>
                <option value="sf">顺丰快递</option>
                <option value="jd">京东快递</option>
                <option value="zto">中通快递</option>
                <option value="sto">申通快递</option>
                <option value="yto">圆通快递</option>
                <option value="htky">百世快递</option>
                <option value="ems">邮政EMS</option>
                <option value="yzpy">邮政包裹</option>
            </select>
        </div>

        <div id="warningMessage" class="warning" style="display: none;">
            注意：顺丰、丰网、中通快递订单格式（订单号:收件人或寄件人手机号后四位）
        </div>

        <div class="button-group">
            <button id="searchBtn">查询快递</button>
            <button id="resetBtn">重置</button>
        </div>
    </div>

    <div id="loading" class="loading" style="display: none;">
        正在查询快递信息...
    </div>

    <div id="error" class="error" style="display: none;"></div>

    <div id="expressResult">
        <div class="express-info">
            <div class="info-card">
                <h3>快递基本信息</h3>
                <div class="info-item">
                    <span class="info-label">快递单号:</span>
                    <span id="number" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">快递公司:</span>
                    <span id="expName" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">快递状态:</span>
                    <span id="deliverystatus" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">是否签收:</span>
                    <span id="issign" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>联系方式</h3>
                <div class="info-item">
                    <span class="info-label">快递公司电话:</span>
                    <span id="expPhone" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">快递员:</span>
                    <span id="courier" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">快递员电话:</span>
                    <span id="courierPhone" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>时间信息</h3>
                <div class="info-item">
                    <span class="info-label">更新时间:</span>
                    <span id="updateTime" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">运输时长:</span>
                    <span id="takeTime" class="info-value"></span>
                </div>
            </div>
        </div>

        <div class="track-list">
            <h3>物流轨迹</h3>
            <div id="trackItems"></div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const orderNoInput = document.getElementById('orderNo');
        const expressTypeSelect = document.getElementById('expressType');
        const searchBtn = document.getElementById('searchBtn');
        const resetBtn = document.getElementById('resetBtn');
        const warningMessage = document.getElementById('warningMessage');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');
        const expressResult = document.getElementById('expressResult');

        // 监听快递公司选择变化
        expressTypeSelect.addEventListener('change', checkExpressType);
        // 监听订单号输入变化
        orderNoInput.addEventListener('input', checkExpressType);

        // 查询按钮事件
        searchBtn.addEventListener('click', searchExpress);

        // 重置按钮事件
        resetBtn.addEventListener('click', resetForm);

        // 检查快递公司类型并显示警告
        function checkExpressType() {
            const selectedType = expressTypeSelect.value;
            const orderNo = orderNoInput.value;

            // 检查是否为需要特殊格式的快递公司
            if (selectedType === 'sf' || selectedType === 'zto' ||
                orderNo.includes('SF') || orderNo.includes('丰网') || orderNo.includes('中通')) {
                warningMessage.style.display = 'block';
            } else {
                warningMessage.style.display = 'none';
            }
        }

        // 查询快递信息
        async function searchExpress() {
            const orderNo = orderNoInput.value.trim();
            const expressType = expressTypeSelect.value;

            // 验证输入
            if (!orderNo) {
                showError('请输入快递单号');
                return;
            }

            showLoading();

            try {
                // 构造查询参数
                let url = `/express?requsetNo=${encodeURIComponent(orderNo)}`;
                if (expressType) {
                    url += `&requestType=${encodeURIComponent(expressType)}`;
                }

                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }

                const result = await response.json();
                if (result.code === 1) {
                    if (result.data) {
                        displayExpressInfo(result.data);
                    } else {
                        showError('未获取到快递信息');
                    }
                } else {
                    showError(result.msg || '查询失败');
                }
            } catch (err) {
                showError('查询快递信息时发生错误: ' + err.message);
            }
        }

        // 显示快递信息
        function displayExpressInfo(express) {
            hideLoading();
            hideError();

            // 基本信息
            document.getElementById('number').textContent = express.number || '--';
            document.getElementById('expName').textContent = express.expName || '--';
            document.getElementById('deliverystatus').textContent = getStatusDescription(express.deliverystatus) || '--';
            document.getElementById('issign').textContent = express.issign === '1' ? '已签收' : '未签收';

            // 联系方式
            document.getElementById('expPhone').textContent = express.expPhone || '--';
            document.getElementById('courier').textContent = express.courier || '--';
            document.getElementById('courierPhone').textContent = express.courierPhone || '--';

            // 时间信息
            document.getElementById('updateTime').textContent = express.updateTime || '--';
            document.getElementById('takeTime').textContent = express.takeTime || '--';

            // 物流轨迹
            displayTrackList(express.list);

            expressResult.style.display = 'block';
        }

        // 显示物流轨迹
        function displayTrackList(trackList) {
            const trackItems = document.getElementById('trackItems');
            trackItems.innerHTML = '';

            if (trackList && trackList.length > 0) {
                trackList.forEach(track => {
                    const trackItem = document.createElement('div');
                    trackItem.className = 'track-item';
                    trackItem.innerHTML = `
                            <div class="track-time">${track.time || '--'}</div>
                            <div class="track-status">${track.status || '--'}</div>
                        `;
                    trackItems.appendChild(trackItem);
                });
            } else {
                trackItems.innerHTML = '<div class="track-item">暂无物流轨迹信息</div>';
            }
        }

        // 获取状态描述
        function getStatusDescription(statusCode) {
            const statusMap = {
                '0': '快递收件(揽件)',
                '1': '在途中',
                '2': '正在派件',
                '3': '已签收',
                '4': '派送失败',
                '5': '疑难件',
                '6': '退件签收'
            };
            return statusMap[statusCode] || '未知状态';
        }

        // 重置表单
        function resetForm() {
            orderNoInput.value = '';
            expressTypeSelect.value = '';
            warningMessage.style.display = 'none';
            expressResult.style.display = 'none';
            hideError();
            hideLoading();
        }

        // 显示加载状态
        function showLoading() {
            loading.style.display = 'block';
            expressResult.style.display = 'none';
            hideError();
        }

        // 隐藏加载状态
        function hideLoading() {
            loading.style.display = 'none';
        }

        // 显示错误信息
        function showError(message) {
            hideLoading();
            error.textContent = message;
            error.style.display = 'block';
            expressResult.style.display = 'none';
        }

        // 隐藏错误信息
        function hideError() {
            error.style.display = 'none';
        }
    });
</script>
</body>
</html>
